<template>
       <div class="comment" >
           <p class="fathercomment" @click=" commentforum(forum)">评论</p>
        <!-- 显示图片 -->
        <el-dialog
        title="图片"
        :visible.sync="imgshow"
        width="600px"
        >
            <img  :src="bigimg" style="" width="500px" >
      </el-dialog>
           <el-dialog
            :title=" operateType"
            :visible.sync="Show"
            width="500px"
            >
                <common-form
                :formLabel="operateFormlabel"
                :form="operateForm"
                :inline="true"
                ref="form"
                >
                    <br>
                    <div class="pictureupload">
                    <p style="display:inline-block;margin-left:33px;margin-right:20px;">帖子图片</p> 
                    <input type="file" v-show="false" ref="file" @change="uploadfile" accept="image/*" multiple="multiple">
                    <el-button  @click="$refs.file.click()">选择图片</el-button>     
                    <br>
                    <img  @click="getImgsrc" :src="val" v-for="(val,index) in File.imgSrc" :key="index" width="50px" height="50px" style="margin-left:10px;margin-top:10px;">                 
                    </div>
                </common-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="medium" @click="Show = false">取消</el-button>
                    <el-button size="medium" type="primary" @click="confirm">确定</el-button>
                </div>
            </el-dialog>
           <div v-for="val,index in fatherComment" :key="index">
                <div class="commentuser">
                    <img :src="val.userAvatar" style="" width="50px" height="50px">
                    <div class="commentuser-name">
                            <p>{{val.userName}}: <span>{{val.comment}}</span> </p>
                            <img  @click="getImgsrc" :src="src" v-for="(src,index) in val.image" :key="index" width="50px" height="50px" style=" border-radius: 0%; margin-left:10px;margin-top:10px;">
                                <span class="ask" style="margin-left:50px;" @click="opeanask(val)">回复</span>
                                <span class="del" style="margin-left:50px;" @click="delcomment(val)">删除</span>
                    </div>
                </div>
                <div class="becommentuser" v-for="cval,cindex in childComment" :key="cindex">
                            <img :src="cval.userAvatar" style="" width="50px" height="50px" >
                            <div class="becommentuser-name">
                            <p>{{cval.userName}}: <span>{{cval.comment}}</span> </p>
                             <img   @click="getImgsrc" :src="csrc" v-for="(csrc,index) in cval.image" :key="index" width="50px" height="50px" style=" border-radius: 0%;margin-left:10px;margin-top:10px;">
                                <span class="ask" style="margin-left:50px;" @click="opeanask(cval)">回复</span>
                                <span class="del" style="margin-left:50px;" @click="delcomment(cval)">删除</span>
                                
                </div>
                </div>
        </div>
        </div>
</template>

<script>
import {commentReply,commentForum,getCommentforum,getCommentchild,deletecomment} from '../../../api/personalData/shop/comment'
import CommonForm from '@/components/ly/Common/CommonForm'
export default {
        name:'comment',
        props:['forum'],
        components:{CommonForm},
        data() {
            return {
                bigimg:'#',
                imgshow:false,
                operateType:'回复帖子',
                Show:false,
                fatherComment:[],
                childComment:[],
                operateFormlabel:[],
                operateForm:{},
                 File:{
                    imgSrc:'',
                    files:''
                },
                commentsrc:''
            }
        },
        mounted(){
        },
        methods:{
              // 图片放大
            getImgsrc(e){
                this.imgshow = true
                this.bigimg = e.target.src
            },
            // 确定
            confirm(){
                if(this.operateType==='回复评论'){
                    const formdata = new FormData();
                    for(let i = 0 ;i<this.File.files.length;i++){
                        formdata.append("files", this.File.files[i]);
                    }
                    commentReply(this.operateForm,formdata).then(data=>{
                         const list = data.data.message
                        console.log(list);
                        if(list === '成功'){
                            this.$message({
                                    type: "success",
                                    message: "回复成功!"
                                })
                                this.Show = false
                                this.File.imgSrc=''
                                this.File.files=''
                                console.log('asdasd',data);
                                this.getComment();
                                this.getchildComment()
                        }
                    })
                    // this.$http({
                    //         url:'/shops/comment/reply',
                    //         method:'post',
                    //         data:formdata,
                    //         params:this.operateForm,
                    //         maxContentLength:Infinity,
                    //         maxRedirects:5,
                    //         maxBodyLength:Infinity,
                    //         headers: { 'Authorization': cookie.getToken() }
                    //     }).then(data => {
                    //     const list = data.data.message
                    //     console.log(list);
                    //     if(list === '成功'){
                    //         this.$message({
                    //                 type: "success",
                    //                 message: "回复成功!"
                    //             })
                    //             this.Show = false
                    //             this.File.imgSrc=''
                    //             this.File.files=''
                    //             console.log('asdasd',data);
                    //             this.getComment();
                    //             this.getchildComment()
                    //     }
                    //     }).catch(err => {
                    //         console.log(err);
                    //     })
            }else if(this.operateType === '评论帖子'){
                    const formdata = new FormData();
                    for(let i = 0 ;i<this.File.files.length;i++){
                        formdata.append("files", this.File.files[i]);
                    }
                    commentForum(this.operateForm,formdata).then(data=>{
                         const list = data.data.message
                        console.log(list);
                        if(list === '成功'){
                            this.$message({
                                    type: "success",
                                    message: "评论成功!"
                                })
                                this.Show = false
                                this.File.imgSrc=''
                                this.File.files=''
                                console.log(data);
                                this.getComment();
                                this.getchildComment()
                        }
                    })
                //     this.$http({
                //             url:'/shops/comment/forum',
                //             method:'post',
                //             data:formdata,
                //             params:this.operateForm,
                //             maxContentLength:Infinity,
                //             maxRedirects:5,
                //             maxBodyLength:Infinity,
                //             headers: { 'Authorization': cookie.getToken() }
                //         }).then(data => {
                //         const list = data.data.message
                //         console.log(list);
                //         if(list === '成功'){
                //             this.$message({
                //                     type: "success",
                //                     message: "评论成功!"
                //                 })
                //                 this.Show = false
                //                 this.File.imgSrc=''
                //                 this.File.files=''
                //                 console.log(data);
                //                 this.getComment();
                //                 this.getchildComment()
                //         }
                // }).catch(err => {
                //     console.log(err);
                // })
            }
            },
            // 获取图片
            uploadfile(e){
                let fs = e.target.files
                this.File.files =fs
                console.log(this.File.files);
                let imgs=[]
                for(let i = 0 ;i<fs.length;i++){
                    const src = window.URL.createObjectURL(fs[i])
                    imgs[i]=src
                }
            this.File.imgSrc = imgs
            console.log(this.File.imgSrc);
            },
            getComment(){
                getCommentforum({forumId:this.forum.forumId,}).then(data=>{
                        const val = data.data.data
                        this.fatherComment = val 
                        for(let i=0;i<val.length;i++){
                            this.getchildComment(val[i]);
                        }
                })
            },
            getchildComment(val){
                getCommentchild({commentId:val.commentId}).then(data=>{
                    const list = data.data.data
                    this.childComment = list
                    console.log('@', this.childComment);
                })
            },
            // 评论帖子
            commentforum(val){
                console.log(val.forumId);
                this.Show = true
                this.operateType = '评论帖子'
                this.commentsrc=''
                this.operateForm = {
                settingId:val.forumId,
                comment:'',
                userId:val.userId ,
                }
                this.operateFormlabel=[  
                {
                    model:'comment',
                    label:'帖子内容',
                    type:'input',
                    display:''
                },
                ]
            },
            // 打开input
            opeanask(val){
                console.log(val);
                    this.Show = true
                    this.operateType = '回复评论'
                    this.commentsrc=''
                    this.operateForm = {
                        rootId:val.commentId,
                        comment:'',
                        userId:val.userId,
                        }
                        this.operateFormlabel=[  
                        {
                            model:'comment',
                            label:'回复内容',
                            type:'input',
                            display:''
                        },
                        ]
            },
            delcomment(val){
            this.$confirm("此操作将永久删除数据,是否继续?",'提示',{
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
                }).then(() => {

                    deletecomment({  
                        commentId:val.commentId,
                        userId:val.userId
                    }).then(data=>{
                        console.log(data);
                        this.getComment();
                        this.getchildComment()
                    })
            }).catch(err => {
                console.log(err);
            })
            }
        },
        created(){
            this.getComment();
        }
}
</script>

<style lang="less" scoped>
.fathercomment{
            color: rgb(158, 158, 158);
            padding: 20px;
            text-align: left;
            cursor: pointer;
            &:hover{
                color: rgb(14, 196, 251);
            }
}
.comment{
    width: 90%;
    margin: 10px auto;
    .commentuser{
        display: flex;
        justify-content: left;
        align-items: center;
       padding-bottom: 20px;
        img{
            border-radius: 50%;
        }
        .commentuser-name{
            margin-left: 10px;
            position: relative;
             &:hover .ask{
            display: block;
            }
             &:hover .del{
            display: block;
            }
            .ask{  
                width: 50px;
                color: rgb(158, 158, 158);
                font-size: 12px;
                position: absolute;
                display: none;
                bottom: -16px;
                right: -27px;
                cursor: pointer;
                    &:hover{
                        color: rgb(14, 196, 251);
                }
            }
            .del{
                width: 50px;
                color: rgb(158, 158, 158);
                font-size: 12px;
                position: absolute;
                display: none;
                bottom: -16px;
                right: -60px;
                cursor: pointer;
                    &:hover{
                       color: rgb(253, 76, 45);
                }
            }
        }
    }
      .becommentuser{
        display: flex;
        justify-content: left;
        align-items: center;
          padding-bottom: 20px;
        img{
            margin-left: 50px;
            border-radius: 50%;
        }
        .becommentuser-name{
            margin-left: 10px;
            position: relative;
             &:hover .ask{
            display: block;
            }
             &:hover .ask{
            display: block;
            }
            .ask{
                width: 50px;
                color: rgb(158, 158, 158);
                font-size: 12px;
                position: absolute;
                display: none;
                bottom: -16px;
                right: -27px;
                cursor: pointer;
                    &:hover{
                        color: rgb(14, 196, 251);
                    }
                }
            .del{
                width: 50px;
                color: rgb(158, 158, 158);
                font-size: 12px;
                position: absolute;
                display: none;
                bottom: -16px;
                right: -60px;
                cursor: pointer;
                    &:hover{
                        color: rgb(253, 76, 45);
                }
            }
        }
    }
}
</style>